<template>
    <div class="menu-preview">
        <el-image class="avatar" src="https://i2.hdslb.com/bfs/archive/71735534a3e1902100818e7beab3673a7e4f361d.jpg" fit="cover"></el-image>
        <!-- 竖向 -->
        <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu :default-openeds="[]" :unique-opened="true" class="el-menu-vertical-demo" default-active="0">
                <el-menu-item index="0" @click.native="menuHandler('')">
                    <template slot="title">
                        <i class="el-icon-menu el-icon-s-home" />
                        <span class="menu-title">系统首页</span>
                    </template>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-menu el-icon-user-solid" />
                        <span class="menu-title">个人中心</span>
                    </template>
                    <el-menu-item index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
                    <el-menu-item index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
                </el-submenu>
                <el-submenu v-for="(menu, index) in menuList.backMenu" :key="menu.menu" :index="index + 2 + ''">
                    <template slot="title">
                        <i class="el-icon-menu" :class="icons[index]" />
                        <span class="menu-title">{{ menu.menu }}</span>
                    </template>
                    <el-menu-item
                        v-for="(child, sort) in menu.child"
                        :key="sort"
                        :index="index + 2 + '-' + sort"
                        @click="menuHandler(child.tableName)"
                    >
                        {{ child.menu }}
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
import menu from '@/utils/menu';

export default {
    data() {
        return {
            menuList: [],
            dynamicMenuRoutes: [],
            role: '',
            icons: [
                'el-icon-s-cooperation',
                'el-icon-s-order',
                'el-icon-s-platform',
                'el-icon-s-fold',
                'el-icon-s-unfold',
                'el-icon-s-operation',
                'el-icon-s-promotion',
                'el-icon-s-release',
                'el-icon-s-ticket',
                'el-icon-s-management',
                'el-icon-s-open',
                'el-icon-s-shop',
                'el-icon-s-marketing',
                'el-icon-s-flag',
                'el-icon-s-comment',
                'el-icon-s-finance',
                'el-icon-s-claim',
                'el-icon-s-custom',
                'el-icon-s-opportunity',
                'el-icon-s-data',
                'el-icon-s-check',
                'el-icon-s-grid',
                'el-icon-menu',
                'el-icon-chat-dot-square',
                'el-icon-message',
                'el-icon-postcard',
                'el-icon-position',
                'el-icon-microphone',
                'el-icon-close-notification',
                'el-icon-bangzhu',
                'el-icon-time',
                'el-icon-odometer',
                'el-icon-crop',
                'el-icon-aim',
                'el-icon-switch-button',
                'el-icon-full-screen',
                'el-icon-copy-document',
                'el-icon-mic',
                'el-icon-stopwatch',
            ],
            menulistBorderBottom: {},
        };
    },
    mounted() {
        const menus = menu.list();
        if (menus) {
            this.menuList = menus;
        } else {
            let params = {
                page: 1,
                limit: 1,
                sort: 'id',
            };

            this.$http({
                url: 'menu/list',
                method: 'get',
                params: params,
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.menuList = JSON.parse(data.data.list[0].menujson);
                    this.$storage.set('menus', this.menuList);
                }
            });
        }
        this.role = this.$storage.get('role');

        for (let i = 0; i < this.menuList.length; i++) {
            if (this.menuList[i].roleName === this.role) {
                this.menuList = this.menuList[i];
                break;
            }
        }
        this.styleChange();
    },
    created() {
        this.icons.sort(() => {
            return 0.5 - Math.random();
        });
    },
    methods: {
        styleChange() {
            this.$nextTick(() => {
                document.querySelectorAll('.el-menu-vertical-demo .el-submenu .el-menu').forEach(el => {
                    el.removeAttribute('style');
                    const icon = { border: 'none', margin: '0px 0 0', background: 'none', display: 'none' };
                    Object.keys(icon).forEach(key => {
                        el.style[key] = icon[key];
                    });
                });
            });
        },
        menuHandler(name) {
            let router = this.$router;
            name = '/' + name;
            router.push(name);
        },
    },
};
</script>
<style lang="scss" scoped>
.menu-preview {
    width: 200px;
    position: fixed;
    height: 100%;
    z-index: 10;

    .avatar {
        width: 44px;
        margin: 10px auto;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        height: 44px;
    }

    .el-scrollbar {
        height: 100%;

        .menu-title {
            color: inherit;
            vertical-align: middle;
            font-size: 16px;
        }
    }
}
</style>
